<template>
	<view
		:style="{'--color': color, '--name-size':pageSet.nameSize*2+'rpx', '--price-color':pageSet.priceColor, '--btn-color':pageSet.btnColor}">
		<view class="content bgwhite d-flex f-column">
			<status-bar :title='tabTitle' back='0' search='1'></status-bar>

			<view class="search-content f-shrink-0 d-flex a-center" v-if="pageSet.locate || pageSet.search">
				<view class="position-box bgF5 d-flex a-center" v-if='city && pageSet.locate'
					@click="toUrl('/pages/classify/citySelect')">
					<text class="iconfont icon-dingwei size30 thmeColor m-right10"></text>
					<text class="size26 color_33 lines" style="max-width: 180rpx;">{{city}}</text>
				</view>
				<navigator class="flex-1" url="/pages/classify/search" v-if="pageSet.search">
					<view class="kite-search bgF5 d-flex a-center">
						<text class="iconfont icon-btn_search"></text>
						<view class="color_77 p-left12">请输入搜索信息</view>
					</view>
				</navigator>
			</view>

			<!-- 组件 -->
			<view v-if="pageData.length">
				<block v-for="(item,index) in pageData" :key="index">
					<Bannel v-if="item.type == 'banner'" :pageData="item.compCont" :isImmerse="1"></Bannel>
					<adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
					<hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
					<VideoList v-if="item.type == 'video'" :pageData="item.compCont"></VideoList>
					<divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
				</block>
			</view>

			<!-- 只有顶级分类 -->
			<view class="topkite padding20-30" v-if="onceLevel.length && pageSet.showCate == 2">
				<view class="m-bot20" @click="toGoodsList(item.classify_id,item.classify_name)"
					v-for="(item,index) in onceLevel" :key="index">
					<image
						:src="item.classify_atlas?$imgUrls(item.classify_atlas) :staticUrl+'/images/imageLoading.png'"
						mode="widthFix" :class="{'bor_radius_16': pageSet.round}"></image>
				</view>
			</view>

			<!-- 侧边顶级 -->
			<view class="kite-wrapper d-flex flex-1"
				v-if='onceLevel.length && (pageSet.showCate == 0 || (pageSet.showCate == 1 && pageSet.cateStyle < 2))'>
				<!-- 左侧一级分类 -->
				<view class="kite-classify d-flex f-column">
					<view>
						<view class="kite-classify-names" v-for="(item,index) in onceLevel" :key="index"
							@click="classifyChk(item.classify_id,index)"
							:class="{'kite-classify-active thmeColor':current == index,'active-prev': current-1 == index,'active-next': current+1 == index}">
							<view class="kite-classify-box">{{item.classify_name}}</view>
						</view>
					</view>
					<view class="flex-1 bgF5" :class="{'active-next':current == onceLevel.length-1}"></view>
				</view>

				<!-- 显示下级分类 -->
				<view class="flex-1 scroll-y padding20" v-if='pageSet.showCate == 1'>
					<!-- 形象图 -->
					<view class="m-bot20"
						@click="toGoodsList(onceLevel[current].classify_id,onceLevel[current].classify_name)"
						v-if='onceLevel[current].classify_atlas'>
						<image :src="$imgUrls(onceLevel[current].classify_atlas)" mode="widthFix"
							:class="{'bor_radius_16': pageSet.round}"></image>
					</view>
					<view v-if="!pageSet.cateStyle">
						<!-- 有三级分类独立显示 -->
						<view v-if="list1.length">
							<view class="kite-goods" v-for="(item,index) in list1" :key="index">
								<view class="kite-goods-title size28 color_33 bold">{{item.name}}</view>
								<view class="d-flex f-wrap">
									<view class="kite-goods-warpper" v-for="(e,i) in item.li" :key='i'>
										<navigator hover-class="none"
											:url="'/pages/goods/goods_list?classId=' + e.id + '&className=' + e.name">
											<view class="kite-img-box flexac">
												<image class="kite-goods-img"
													:src="e.img?$imgUrls(e.img) :staticUrl+'/images/imageLoading.png'"
													mode="aspectFit"></image>
											</view>
											<view>{{e.name}}</view>
										</navigator>
									</view>
								</view>
							</view>
						</view>
						<view class="kite-goods d-flex f-wrap" v-if="list2.length">
							<view class="kite-goods-warpper" v-for="(item,index) in list2" :key="index">
								<navigator hover-class="none"
									:url="'/pages/goods/goods_list?classId=' + item.id +'&className=' + item.name">
									<view class="kite-img-box flexac">
										<image class="kite-goods-img"
											:src="item.img?$imgUrls(item.img) :staticUrl+'/images/imageLoading.png'"
											mode="aspectFit"></image>
									</view>
									<view>{{item.name}}</view>
								</navigator>
							</view>
						</view>
					</view>

					<view v-if="pageSet.cateStyle == 1">
						<view v-if="list2.length">
							<view class="m-bot20" @click="toGoodsList(item.id,item.name)" v-for="(item,index) in list2"
								:key="index">
								<image :src="item.atlas?$imgUrls(item.atlas) :staticUrl+'/images/imageLoading.png'"
									mode="widthFix" :class="{'bor_radius_16': pageSet.round}"></image>
							</view>
						</view>
						<view v-if="list1.length">
							<view v-for="(item,index) in list1" :key="index">
								<view class="d-flex a-center p-top10 p-bot10 m-bot20 bot_bor_ee"
									@click="toGoodsList(item.id,item.name)">
									<view class="size32 color_33 bold flex-1">{{ item.name }}</view>
									<text class="iconfont icon-xiangyouxiayiye size28"></text>
								</view>
								<view class="m-bot20" @click="toGoodsList(e.id,e.name)" v-for="(e,i) in item.li"
									:key='i'>
									<image :src="e.atlas?$imgUrls(e.atlas) :staticUrl+'/images/imageLoading.png'"
										mode="widthFix" :class="{'bor_radius_16': pageSet.round}"></image>
								</view>
							</view>
						</view>
					</view>

					<empty cat='4' v-if="noData1" :msg='"“"+onceLevel[current].classify_name+"”暂无分类"'></empty>
				</view>

				<!-- 显示商品 -->
				<view class="flex-1 p-re" :style="{'--rgbacolor': rgbaColor}" v-if="pageSet.showCate == 0">
					<scroll-view scroll-x :scroll-into-view="`tab${classifyId}`" class="subkite p-left15 p-ab"
						v-if="structure[current] && structure[current].listNum">
						<view class="item bgF5 size26 color_66 m-right20 d-inline-block"
							v-for="(item,index) in structure[current].list" :key="index"
							:class="{'thmeColor': classifyId == item.id}" :id="`tab${item.id}`"
							@click="classifyChk(item.id, current)">{{ item.name }}</view>
					</scroll-view>
					<scroll-view scroll-y @scrolltolower="scrolltolowerList" class="wh border-box"
						:class="{'p-top100': structure[current] && structure[current].listNum}">
						<view class="lr-space" v-if="pageList.length">
							<view class="row j-sb" v-if="!pageSet.listStyle">
								<view class="list m-bot20 bor_radius_10" v-for="(item,index) in pageList" :key="index"
									@click="toGoodsDetail(item)"
									:class="{'border': !pageSet.goodStyle, 'shadow': pageSet.goodStyle == 1}">
									<view class="p-re">
										<image :src="$imgUrls(item.img)" mode="aspectFill"
											:style="{'height': 260*item.img_proportion+'rpx'}"></image>
										<view class="masks wh p-ab flexac" v-if="item.stock == 0">
											<image :src="$imgUrls('Uploads/diy/img/sold.png')" class="sold"></image>
										</view>
									</view>
									<view class="padding10 color_33 ">
										<view class="goodname ellipsis_2">{{item.name}}</view>
										<view class="color_99 m-top10" v-if="item.sales_number != 0">
											已售{{ item.sales_number }}</view>
										<view class="profitTitle_ lines" v-if="item.profitTitle">
											<text>{{ item.profitTitle }}</text>
										</view>
										<view class="row j-sb a-center m-top20">
											<view class="price d-flex a-center">
												<text class="h7">￥</text>
												<text class="size32">{{item.price}}</text>
											</view>
											<view class="shopName size22 white" @click.stop="openPop(item)">立即购买</view>
										</view>
									</view>
								</view>
							</view>

							<view class="list-1" v-if="pageSet.listStyle == 1">
								<view class="d-flex a-center padding20 m-bot20 bor_radius_10"
									v-for="(item,index) in pageList" :key="index"
									:class="{'border': !pageSet.goodStyle, 'shadow': pageSet.goodStyle == 1, 'f-row-reverser': index % 2}"
									@click="toGoodsDetail(item)">
									<image :src="$imgUrls(item.img)" mode="aspectFill" class="img bor_radius_10">
									</image>
									<view class="flex-1"
										:class="{'text-right p-right20': index % 2, 'p-left20': index % 2 == 0, 'text-center': pageSet.textCenter}">
										<view class="goodname ellipsis">{{item.name}}</view>
										<view class="profitTitle_ lines" v-if="item.profitTitle">
											<text>{{ item.profitTitle }}</text>
										</view>
										<view class="m-top10">
											<text class="price size32 m-right10">￥{{ item.price }}</text>
											<text class="color_99 line-through">￥{{ item.full_price }}</text>
										</view>
										<view class="shopName white m-top10 d-inline-block" @click.stop="openPop(item)">
											<text class="iconfont icon-gouwuche h6 m-right8"></text>
											<text>立即购买</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<empty cat='4' v-if="noData1" msg='还没有相关商品哦~'></empty>
					</scroll-view>
				</view>
			</view>

			<!-- 标签面板 -->
			<view class="topkite tagPanel bgF5 flex-1"
				v-if="onceLevel.length && pageSet.showCate == 1 && pageSet.cateStyle == 2">
				<view class="panel bgwhite padding30 m-bot24" v-for="(item,index) in onceLevel" :key="index">
					<view class="d-flex a-center" @click="toGoodsList(item.classify_id,item.classify_name)">
						<view class="size28 color_22 bold flex-1">{{ item.classify_name }}</view>
						<text class="iconfont icon-xiangyouxiayiye h7 color_b4"></text>
					</view>
					<view class="d-flex f-wrap j-sb text-center m-top14"
						v-if="structure[index] && structure[index].listNum">
						<view class="item bgf7f7 bor_radius_4 size26 color_44 m-top16 ellipsis"
							v-for="(subItem,subIndex) in structure[index].list" :key="subIndex"
							@click="toGoodsList(subItem.id,subItem.name)">{{ subItem.name }}</view>
					</view>
				</view>
			</view>

			<!-- 分类+推荐商品/门店 -->
			<view v-if="onceLevel.length && pageSet.showCate == 3">
				<view class="classNav bgwhite" :style="{top: totalHeight+'px'}">
					<u-tabs :list="onceLevel" keyName="classify_name" :current="current" lineWidth="0"
						@click="e=>classifyChk(e.classify_id,e.index)"
						:inactiveStyle="{color:'#111',transform:'scale(1)'}"
						:activeStyle="{color,fontWeight:'bold',transform:'scale(1.15)'}"></u-tabs>
				</view>
				<view class="gridList d-flex f-wrap" v-if="structure[current] && structure[current].listNum">
					<view class="w-20 text-center m-bot30" v-for="(item,index) in structure[current].list" :key="index"
						@click="toGoodsList(item.id,item.name)">
						<image
							:src="item.classify_img?$imgUrls(item.classify_img) :staticUrl+'/images/imageLoading.png'"
							mode="aspectFit"></image>
						<view class="size26 p-top10">{{ item.name }}</view>
					</view>
				</view>
				<view class="classNav bgwhite" :style="{top: totalHeight+44+'px', borderTop: '12rpx solid #f5f6f8'}">
					<u-tabs :list="tabList" keyName="title" :current="tabIndex" :lineColor="color"
						@click="e=>tabIndex = e.index"></u-tabs>
				</view>
				<view class="topkite" v-if="tabList.length">
					<view class="padding20" v-if="tabList[tabIndex].type == 'store'">
						<view class="storeItem bor_radius_20 padding30-20 m-bot30"
							v-for="(item,index) in tabList[tabIndex].list" :key="index"
							@click="toUrl('/pages/store/storeIndex?shop_id=' + item.shop_id)">
							<view class="d-flex a-center m-bot30">
								<image class="logo bor_radius m-right20" :src="$imgUrls(item.logo)" mode="aspectFill">
								</image>
								<view class="flex-1">
									<view class="size30 ellipsis m-bot10">{{ item.name }}</view>
									<view class="color_99 ellipsis">{{ item.address }}</view>
								</view>
								<view class="thmeBg size26 white padding8-24 bor_radius_30">进店</view>
							</view>
							<view class="bgFA bor_radius_30s scroll-x d-flex">
								<view class="m-right6 p-re" v-for="(e,i) in item.goodsList" :key="i"
									@click.stop="toGoodsDetail(e)">
									<image :src="$imgUrls(e.img)" mode="aspectFill" class="img"></image>
									<view class="badge p-ab bor_radius_20 padding2-14 white">￥{{ parseFloat(e.price) }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="padding20-30 d-flex f-wrap j-sb" v-else>
						<view class="goodsItem m-bot40" v-for="(item,index) in tabList[tabIndex].list" :key="index"
							@click="toGoodsDetail(item)">
							<image class="bor_radius_20" :src="$imgUrls(item.img)" mode="aspectFill"></image>
							<view class="goodname ellipsis_2 m-top20">{{ item.name }}</view>
							<view class="profitTitle_ lines" v-if="item.profitTitle">
								<text>{{ item.profitTitle }}</text>
							</view>
							<view class="price m-top20">
								<text>￥</text>
								<text class="size32">{{ item.price }}</text>
								<text class="color_99 m-left10 p-right10 right_bor_dd"
									v-if="item.chapterNum">共{{ item.chapterNum }}章节</text>
								<text class="color_99 m-left10">已售{{ item.sales_number }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<empty cat='2' v-if="noData" :msg='msg'></empty>
		</view>
		<tabBar :tab="17"></tabBar>

		<specsPopup :showPopup="showPopup" :pageData="info" @close="showPopup = false" />
		<showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Bannel from '@/components/home/Bannel.vue'
	import adv from '@/components/home/adv.vue'
	import hotZone from '@/components/home/hotZone.vue'
	import VideoList from '@/components/home/VideoList.vue'
	import divider from '@/components/home/divider.vue'
	import specsPopup from '@/components/specsPopup.vue'
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				classifyId: '',
				current: 0,
				onceLevel: [],
				list1: [],
				list2: [],
				noData: false,
				noData1: false,
				msg: '',
				page: 1,
				pageNum: 10,
				pageList: [],
				getMore: true,
				pageSet: { // 页面设置
					showCate: '0',
					cateStyle: 0,
					round: false,
					listStyle: 0,
					goodStyle: 0,
					textCenter: false,
					nameSize: 12,
					priceColor: '#333',
					btnColor: '#FF0B03'
				},
				pageData: '', // diy组件
				structure: [],
				tabList: [],
				tabIndex: 0,
				cateType: 0, // 为1显示课程分类
				showPopup: false,
				info: '',
				showModal: false
			}
		},
		computed: {
			...mapState(['tabTitle', 'color', 'city', 'vid', 'share', 'totalHeight']),
			rgbaColor() {
				return 'rgba(' + parseInt('0x' + this.color.slice(1, 3)) + ',' + parseInt('0x' + this.color.slice(3, 5)) +
					',' + parseInt('0x' + this.color.slice(5, 7)) + ',' + 0.1 + ')'
			}
		},
		components: {
			Bannel,
			adv,
			hotZone,
			VideoList,
			divider,
			specsPopup
		},
		onLoad(e) {
			if (e.cateType) this.cateType = e.cateType
			if (e.classifyId) this.classifyId = e.classifyId
			Promise.all([this.diyget(), this.topCategory()]).then(results => {
				console.log('results', results)
				if (this.pageSet.showCate == 1 && this.pageSet.cateStyle < 2) this.goodsType()
				if (this.pageSet.showCate == 0) {
					this.sortClassGoods()
					this.structure.forEach(item => {
						if (item.listNum) item.list = [{
							id: item.classify_id,
							name: '全部'
						}, ...item.list]
					})
				}
				if (this.pageSet.showCate == 3) this.getRecommend()
			})
		},
		methods: {
			diyget() {
				return new Promise(resolve => {
					this.$http.get({
						url: '/newdiy/api/v1/diy/getDiyPage',
						data: {
							front: 1,
							type: 4
						}
					}).then(res => {
						if (res.data) {
							if (res.data.pageSet) {
								this.pageSet = res.data.pageSet
								this.pageData = res.data.front_value || []
							} else {
								this.initSet()
							}
						} else {
							this.initSet()
						}
						resolve(res)
					})
				})
			},
			initSet() {
				this.pageSet.locate = true
				this.pageSet.search = true
			},
			topCategory() {
				this.noData = false
				return new Promise(resolve => {
					this.$http.post({
						url: '/singleSaleApi/allUpList',
						data: {
							classify_cate: this.cateType,
							brand: 1
						}
					}).then(res => {
						if (res.errcode != '100') {
							this.onceLevel = []
							this.noData = true
							this.msg = res.msg ? res.msg : '没有任何分类哦'
							return
						}
						this.onceLevel = res.data || []
						this.structure = res.structure || []
						if (this.classifyId) {
							const index = this.onceLevel.findIndex(item => item.classify_id == this
								.classifyId)
							if (index > -1) this.current = index
						}
						if (!this.classifyId) this.classifyId = this.onceLevel[0].classify_id
						resolve(res)
					})
				})
			},
			goodsType() {
				this.noData1 = false
				this.$http.post({
					url: '/singleSaleApi/goodsList',
					data: {
						classify_id: this.classifyId,
						brand_id: this.classifyId,
						city: this.city ? this.city : '',
						classify_cate: this.cateType,

					}
				}).then(res => {
					let result = res.data.list || []
					if (!result.length) return this.noData1 = true
					this.list1 = result.filter(item => item.count)
					this.list2 = result.filter(item => !item.count)
				})
			},
			sortClassGoods() {
				this.noData1 = false
				this.$http.post({
					url: '/singleSaleApi/sortClassGoods',
					data: {
						page: this.page,
						pageNum: this.pageNum,
						classify_id: this.classifyId,
						brand_id: this.classifyId,
						mode: 1,
						goods_cate: this.cateType
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg)
					let result = res.data.DataArr || []
					this.pageList = this.page == 1 ? result : [...this.pageList, ...result]
					if (result.length < this.pageNum) this.getMore = false
					if (!this.pageList.length) this.noData1 = true
				})
			},
			getRecommend() {
				this.tabList = []
				this.tabIndex = 0
				this.$http.post({
					url: '/zzj_singleSaleApi/getRelatedRecommend',
					data: {
						classify_id: this.classifyId,
						type: this.cateType,
						num: 20
					}
				}).then(res => {
					for (let key in res.data) {
						if (res.data[key].state == 1) {
							this.tabList.push({
								type: key,
								...res.data[key]
							})
						}
					}
				})
			},
			classifyChk(id, index) {
				if (this.classifyId != id) {
					this.current = index
					this.classifyId = id
					if (this.pageSet.showCate == 1) {
						this.list1 = []
						this.list2 = []
						this.goodsType()
					} else if (this.pageSet.showCate == 0) {
						this.page = 1
						this.getMore = true
						this.sortClassGoods()
					} else if (this.pageSet.showCate == 3) {
						this.getRecommend()
					}
				}
			},
			scrolltolowerList() {
				if (!this.getMore) return
				this.page++
				this.sortClassGoods()
			},
			toGoodsList(id, name) {
				this.toUrl('/pages/goods/goods_list?classId=' + id + '&className=' + name)
			},
			toGoodsDetail(item) {
				if (item.goods_cate == 1) return this.$toCourses(item.goods_id)
				this.toGoods(item.goods_id)
			},
			openPop(item) {
				if (!this.vid) return this.showModal = true
				this.info = item
				this.showPopup = true
			}
		},
		onShareAppMessage() {
			let share = this.share
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: calc(100vh - 100rpx - constant(safe-area-inset-bottom));
		height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
	}

	.search-content {
		height: 100rpx;
		padding: 0 $uni-page-space;

		.position-box {
			padding: 0 20rpx;
			height: 60rpx;
			border-radius: 60rpx;
			margin-right: $uni-page-space;
		}
	}

	.topkite {
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom)) !important;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom)) !important;
	}

	.kite-wrapper {
		min-height: 0; // 解决父元素flex:1时高度被子元素撑开

		.kite-classify {
			width: 180rpx;
			overflow-y: auto;

			.kite-classify-names {
				min-height: 100rpx;
				background-color: #F5F5F5;
				display: flex;
				align-items: center;
				color: #666;
				padding: 20rpx 0;

				.kite-classify-box {
					width: 100%;
					text-align: left;
					padding: 0 10rpx 0 20rpx;
					font-size: 26rpx;
				}

				&.kite-classify-active {
					background-color: white;

					.kite-classify-box {
						border-left: 6rpx solid var(--color);
						font-weight: bold;
						font-size: 28rpx;
					}
				}
			}

			.active-prev {
				border-bottom-right-radius: 10rpx;
			}

			.active-next {
				border-top-right-radius: 10rpx;
			}
		}

		.kite-goods {
			width: 98%;
			box-shadow: inset 2rpx -2rpx 6rpx 2rpx #F8F8F8;
			margin: 0 auto 20rpx;
			border-radius: 6rpx;

			.kite-goods-title {
				padding: 16rpx 10rpx 0 24rpx;
			}

			.kite-goods-warpper {
				width: 33.3%;
				min-height: 216rpx;
				text-align: center;

				.kite-img-box {
					width: 128rpx;
					height: 160rpx;
					margin: 0 auto;

					.kite-goods-img {
						width: 120rpx;
						height: 120rpx;
					}
				}
			}
		}

		.subkite {
			line-height: 100rpx;
			white-space: nowrap;
			box-sizing: border-box;
			top: 0;
			left: 0;
			z-index: 10;

			.item {
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 30rpx;
				border-radius: 25rpx;

				&.thmeColor {
					background: var(--rgbacolor) !important;
				}
			}
		}
	}

	.list {
		width: 260rpx;

		.masks {
			background: rgba(0, 0, 0, 0.4);
			top: 0;
			left: 0;

			.sold {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.shopName {
			padding: 4rpx 10rpx;
			border-radius: 10rpx;
			background-color: var(--btn-color);
		}
	}

	.list-1 {
		padding: 2rpx 0;

		.img {
			width: 230rpx;
			height: 230rpx;
		}

		.shopName {
			width: fit-content;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 16rpx;
			border-radius: 22rpx;
			background-color: var(--btn-color);
		}
	}

	.tagPanel {
		padding: 24rpx 24rpx 0 24rpx;

		.panel {
			border-radius: 12rpx;
		}

		.item {
			width: calc(50% - 8rpx);
			line-height: 70rpx;
			padding: 0 30rpx;
		}
	}

	.classNav {
		position: sticky;
		left: 0;
		z-index: 10;
	}

	.gridList {
		padding: 30rpx calc((100% - 450rpx) / 12) 0;

		image {
			width: 90rpx;
			height: 90rpx;
		}
	}

	.goodsItem {
		width: 335rpx;

		image {
			height: 335rpx;
		}
	}

	.storeItem {
		&:nth-child(3n-2) {
			background: #f7f6f2;
		}

		&:nth-child(3n-1) {
			background: #f8f2f2;
		}

		&:nth-child(3n) {
			background: #f9f4f8;
		}

		.logo {
			width: 80rpx;
			height: 80rpx;
		}

		.img {
			width: 200rpx;
			height: 200rpx;
		}

		.badge {
			background: rgba(0, 0, 0, 0.4);
			right: 10rpx;
			bottom: 10rpx;
		}
	}

	.goodname {
		font-size: var(--name-size);
	}

	.price {
		color: var(--price-color)
	}

	// 配置
	.shadow {
		box-shadow: 0 4rpx 24rpx rgba(100, 101, 102, .12);
	}

	.border {
		border: 1rpx solid #ebedf0;
	}

	.lr-space {
		padding: 0 calc((100vw - 180rpx - 520rpx) / 3);
	}
</style>